<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorate="~{base_layout}" lang="zh">
<head>
    <title>${article.title}</title>
    <link rel="stylesheet" href="/libs/editormd/css/editormd.css"/>
    <script src="/libs/editormd/editormd.js"></script>
    <script src="/libs/editormd/lib/zepto.min.js"></script>
    <style rel="stylesheet">
        .main-container {
            height: calc(100% - 16px);
            overflow-y: hidden;
        }

        #form {
            height: 100%;
        }

        .editormd-preview-container, .editormd-html-preview {
            overflow-y: hidden;
        }

        .mdc-card__action-buttons > a, .mdc-card__action-buttons > button {
            max-width: 64px;
        }

        .mdc-card__action-buttons > button {
            right: 0;
        }

        #markdown-editor {
            z-index: 6;
        }
    </style>
</head>
<body>
<div layout:fragment="container" class="main-container">
    <form id="form" class="mdc-card mdc-card__non-shadow" onsubmit="void(0);">
        <!-- markdown内容 -->
        <div class="" id="markdown-editor">
            <textarea id="content" style="display:none;"
                      th:text="${article ne null ? article.content : ''}">${article.content}</textarea>
        </div>
        <!--操作-->
        <div class="mdc-layout-grid__inner mdc-card__action-buttons mdc-layout-grid--align-right mdc-container__relative">
            <div class="mdc-layout-grid__cell "></div>
            <a href="/manage/article/index"
               class="mdc-button mdc-layout-grid__cell mdc-card__action mdc-button--raised mdc-ripple-upgraded">
                返回
            </a>
        </div>
    </form>
</div>
<div layout:fragment="common-script">
    <script type="text/javascript" th:inline="javascript">
      $(function() {
        editormd('markdown-editor', {
          width: '100%',
          // markdown: '这里是显示的内容',
          height: 'calc(100% - 24px)',
          // autoHeight : true,
          path: '/libs/editormd/lib/',
          saveHTMLToTextarea: true,
          codeFold: true,
          htmlDecode: 'style,script,iframe|on*',
          sequenceDiagram: true,
          imageUpload: true,
          imageUploadFieldName: 'file',
          imageUploadMsgHandler: function(res) {
            return {
              success: res.result === true ? 1 : 0,
              url: res.data,
              message: res.msg,
            };
          },
          imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],
          imageUploadURL: '/upload/uploadFile',
          // onload : function() {
          //   console.log("onload =>", this, this.id, this.settings);
          // }
        });
      });
    </script>
</div>
</body>
</html>
